<template>
	<view class="min-vh-70">
		<view class="x-navbar x-navbar-sticky x-navbar-body"
			:style="[`--bg-opacity:${opacity.navbar}`, `padding-top:${PLATFORM.statusBarHeight}px`]">
			<view class="x-navbar-tools grid-gap-2">
				<!-- <text class="font-weight-500 h8 text-ellipsis-1" style="max-width:calc(100% - 15px)">贵阳市</text> -->
				<x-city class="font-weight-500 h8 text-ellipsis-1" style="max-width:calc(100% - 15px)" />
				<image src="/static/icons/arrow-down.png" mode="aspectFit" class="x-navbar-icons-image"
					style="width: 7px; height: 6px;" />
			</view>
			<view class="x-navbar-content">
				<text class="text-primary h6 font-weight-700 text-ellipsis-1 x-navbar-title">{{ WEBCONFIG?.web_name
					}}</text>
			</view>
			<view class="x-navbar-icons"></view>
			<!-- #ifndef MP-WEIXIN -->
			<view class="x-navbar-icons" @tap="$page.open('/pages/article/content?alias=customer_service')">
				<image src="/static/icons/notice.png" mode="aspectFit" class="x-navbar-icons-image"
					style="width: 22px; height: 24px;" />
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-navbar-icons"></view>
			<!-- #endif -->
		</view>
		<view class="x-search"
			:style="[`--bg-opacity:${opacity.navbar}`, `--xl-status-bar-height:${PLATFORM.statusBarHeight}px`]">
			<view class="x-search-input">
				<image src="/static/icons/search.png" mode="aspectFit" style="width: 16px; height: 16px;" />
				<input type="text" class="x-search-input__content" placeholder="搜索" placeholder-class="text-placeholder"
					confirm-type="search" v-model="search.keywords" @input="searchGetList" />
				<text class="x-search-input__btn" @tap="searchGetList">搜索</text>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-search-icons" @tap="$page.open('/pages/article/content?alias=customer_service')">
				<image src="/static/icons/notice.png" mode="aspectFit" class="x-search-icons-image"
					style="width: 22px; height: 24px;" />
			</view>
			<view class="x-mp-weixin-capsule"></view>
			<!-- #endif -->
		</view>
		<view class="p-4 flex grid-gap-5 flex-column">
			<x-ads v-show="bannerShow" position="banner" rounded="12" @loaded="updateTabRect" v-model:show="bannerShow"></x-ads>
			<view class="bg-white rounded-4 flex flex-center grid-gap-2 p-3"
			v-show="noticeShow">
				<image src="/static/icons/notice-text-icon.png" mode="aspectFit" style="width: 55px;height: 21px;" />
				<x-notice position="notice" height="17" class="flex-1" @loaded="updateTabRect" v-model:show="noticeShow"></x-notice>
			</view>
			<AppointmentService v-model:show="AppointmentServiceShow" v-show="AppointmentServiceShow" ref="AppointmentServiceRef" @loaded="updateTabRect" />
			<x-grid v-show="homeQuickShow" position="home_quick" col="5" @loaded="updateTabRect" v-model:show="homeQuickShow"></x-grid>
			<view class="flex flex-column" v-show="RecommendTechnician.length > 0">
				<view class="pb-4">
					<text class="item-primary-active">{{ WebConfigStore.replaceIndustryPersonnelName('推荐技师') }}</text>
				</view>
				<view class="grid-columns-4 pt-4 grid-gap-2">
					<view class="grid-column-1 flex flex-column flex-center grid-gap-1"
						v-for="(item, index) in RecommendTechnician" :key="index"
						@tap="$page.open('/pages/technician/details?id=' + item.technician_id)">
						<image :src="item.headimg" mode="scaleToFill"
							style="width: 154rpx;height: 154rpx;border-radius: 50%;" />
						<text class="font-weight-500 h9">{{ item.nickname }}</text>
						<text class="h10 text-placeholder">总接单{{ item.order_num }}</text>
					</view>
				</view>
			</view>
		</view>
		<view id="tab" class="tab flex"
			:style="[`--bg-opacity:${opacity.tab}`, `--xl-status-bar-height:${PLATFORM.statusBarHeight}px`]">
			<view class="flex-1 flex flex-y-center tab-home">
				<view v-for="(item, index) in TabList" :key="index" :id="item.value"
					class="h9 font-weight-600 tab-item text-grey flex-1" @tap="setNavTab(item)">
					<text :class="{ 'item-primary-active': search.sort === item.value }">{{ item.title }}</text>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="x-mp-weixin-capsule"></view>
			<!-- #endif -->
		</view>
		<view class="p-4 flex flex-column grid-gap-4" id="projectList">
			<view class="bg-white p-4 rounded-4" v-for="(item, index) in projectList" :key="index">
				<x-project-item :project="item"
					@tap="$page.open('/pages/project/details?id=' + item.id)"></x-project-item>
			</view>
			<x-more :status="loading" @load="getList"></x-more>
		</view>
		<x-tabbar @reload="handleReload"></x-tabbar>
		<x-one-click-alarm ref="XOneClickAlarmRef"/>
	</view>
</template>

<script setup lang="ts">
import { ref, watch, nextTick } from 'vue';
import { onLoad, onPageScroll, onReachBottom, onShow,onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app';
import { usePlatformStore, useWebConfigStore, useRefs } from "@/stores";
import { $page, $api, $func, $helper } from "@/utils";
import AppointmentService from './modules/AppointmentService.vue';
const bannerShow = ref(true);
const noticeShow = ref(true);
const AppointmentServiceShow = ref(true);
const homeQuickShow = ref(true);
const PlatformStore = usePlatformStore();
const { PLATFORM } = useRefs(PlatformStore);
const WebConfigStore = useWebConfigStore();
const { WEBCONFIG } = useRefs(WebConfigStore);
const opacity = ref<{
	navbar: number | string
	search: number | string
	tab: number | string
}>({
	navbar: 0,
	search: 0,
	tab: 0
});
const top = ref(0);
const tabTop = ref<number | undefined>();
const updateTabRect = () => {
	uni.createSelectorQuery().select("#tab")
		.boundingClientRect((data: any) => {
			if (!data) return;
			tabTop.value = data.top;
		})
		.exec();
}
watch(() => top.value, (val: number) => {
	if (val < 0) {
		return;
	}
	opacity.value.navbar = val > 50 ? 1 : (val / 50).toFixed(1);
	opacity.value.search = val > (50 + PLATFORM.value.statusBarHeight) ? 1 : (val / (50 + PLATFORM.value.statusBarHeight)).toFixed(1);
	if (tabTop.value) {
		const start = tabTop.value - (50 + PLATFORM.value.statusBarHeight);
		const end = tabTop.value - PLATFORM.value.statusBarHeight;
		if (val < start) {
			opacity.value.tab = 0;
		} else {
			opacity.value.tab = val > end ? 1 : (((val - start) / (end - start))).toFixed(1);
		}
	}
})
const RecommendTechnician = ref<TechnicianInterface[]>([]);
const getRecommendTechnician = () => {
	$api.Technician.list({
		limit: 8,
		recommend: 1
	}).then((data: any) => {
		RecommendTechnician.value = data;
		nextTick(() => {
			updateTabRect();
		});
	});
}
const TabList = ref<any>([
	{
		title: '推荐',
		value: 'recommend'
	},
	{
		title: '销量',
		value: 'sale'
	},
	{
		title: '价格',
		value: 'price'
	},
	{
		title: '好评',
		value: 'comment'
	}
])
const search = ref({
	page: 1,
	limit: 10,
	keywords: '',
	sort: 'recommend',
	order: 'desc'
})
const projectList = ref<any>([]);
const loading = ref<LoadingType>('loadmore');
const getList = () => {
	if (loading.value === 'loading' || loading.value === 'nomore') return;
	loading.value = 'loading';
	$api.Service.list(search.value).then((data: any) => {
		loading.value = 'loadmore';
		projectList.value = [...projectList.value, ...data.data];
		search.value.page++;
		if (data.current_page >= data.last_page) {
			loading.value = 'nomore';
		}
	}).finally(() => {
		if (loading.value === 'loading') {
			loading.value = 'loadmore';
		}
	});
}
const debounceGetList = $func.debounce(getList, 300);
const setNavTab = (item: any) => {
	if (search.value.sort == item.value) {
		search.value.order = search.value.order == 'asc' ? 'desc' : 'asc';
	} else {
		search.value.sort = item.value;
		search.value.order = 'desc';
	}
	search.value.page = 1;
	projectList.value = [];
	loading.value = 'loadmore';
	scrollToTab();
	debounceGetList();
}
const searchGetList = () => {
	search.value.page = 1;
	projectList.value = [];
	loading.value = 'loadmore';
	scrollToTab();
	debounceGetList();
}
const scrollToTab = () => {
	uni.createSelectorQuery().select("#tab").boundingClientRect((data: any) => {
		uni.pageScrollTo({
			scrollTop: data.top + top.value - PLATFORM.value.statusBarHeight,
			duration: 300
		});
	}).exec();
}
const handleReload = () => {
	getRecommendTechnician();
	searchGetList();
	console.log('reload');
}
const AppointmentServiceRef = ref();
const XOneClickAlarmRef = ref();
onPageScroll(({ scrollTop }: { scrollTop: number }) => {
	top.value = scrollTop;
})
onLoad(() => {
	getRecommendTechnician();
	getList();
})
onReachBottom(() => {
	getList();
})
onShow(() => {
	AppointmentServiceRef.value?.getList();
	XOneClickAlarmRef.value?.getList();
	// #ifdef H5
	$helper.replaceUrlParam('appid', $helper.appid());
	// #endif
})
onShareAppMessage(()=>{
	return $page.shareMessage({
		title: '首页',
		path: `/pages/index/index`
	})
})
onShareTimeline(()=>{
	return $page.shareTimeline({
		title: '首页',
		path: `/pages/index/index`
	})
})
</script>

<style lang="scss">
/* #ifdef H5 */
uni-page[data-page="pages/index/index"] {

	/* #endif */
	page {
		background: radial-gradient(circle at 15% 20%, var(--xl-primary) -100%, transparent 35%),
			radial-gradient(circle at 27% 5%, var(--xl-primary-light-3) -50%, transparent 30%),
			radial-gradient(circle at 85% 17%, var(--xl-primary-light-1) -50%, transparent 25%);
		background-repeat: no-repeat;
		background-position: top center;
		background-color: $uni-bg-color-grey;
		/* #ifdef H5 */
		background-attachment: fixed;
		/* #endif */
	}

	/* #ifdef H5 */
}

/* #endif */
</style>
<style lang="scss" scoped>
.tab {
	--bg-opacity: 0;
	height: 50px;
	position: sticky;
	top: max(constant(safe-area-inset-top), var(--xl-status-bar-height));
	top: max(env(safe-area-inset-top), var(--xl-status-bar-height));
	z-index: 998;
	background-color: rgba(255, 255, 255, var(--bg-opacity));

	.tab-home {
		background: linear-gradient(180deg, #FFFFFF 0%, transparent 100%);
		border-radius: 40rpx 40rpx 0rpx 0rpx;
	}

	&-item {
		height: 50px;
		line-height: 50px;
		display: inline-flex;
		justify-content: center;
		align-items: center;

		.item-primary-active {
			padding: 0;
		}
	}

	.x-mp-weixin-capsule {
		width: calc(104px * var(--bg-opacity));
		transition: width 0.3s;
	}
}
</style>